<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title></title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" mce_src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<style type="text/css">
		html body {
			padding:0px;
			margin:0px;
			
		}
		
		.container {
			width:1350px;
			height:580px;
			padding:0px 0px;
		}

		.left {
			float:left;
			width:20%;
			height:100%;
			border:0px solid red;
		}

		.right {
			float:right;
			width:79%;
			height:100%;
			border:0px solid red;
		}

		#map {
			width:100%;
			height:70%;
			border: 0px solid black;
		}

		.SS {
			float:left;
			width:97%;
			height:100px;
			margin-right:3.3%;
			
		}
		.SS textarea {
			border-right:none;
			width:100%;
			height:50%;
			word-break:break-all;
			font: 12px/100% Arial, Helvetica, sans-serif;
			background:#E0F8F7;
			line-height:150%;
		}

		.DWJH {
			float:left;
			width:97%;
			height:130px;
			margin-right:3.3%;
		}

		.DWJH textarea {
			border-right:none;
			width:100%;
			height:62%;
			word-break:break-all;
			font: 12px/100% Arial, Helvetica, sans-serif;
			background:#E0F8F7;
			line-height:150%;
		}

		.QY {
			float:left;
			width:97%;
			height:100px;
		}

		.QY textarea {
			border-right:none;
			width:100%;
			height:50%;
			word-break:break-all;
			font: 12px/100% Arial, Helvetica, sans-serif;
			background:#E0F8F7;
			line-height:150%;
		}

		.editableSelectInput {
			color:#000000;
			font: 14px Arial, Helvetica, sans-serif;
			background:#E0F8F7;
			width:195px;
			margin:0 10px 10px -224px;
		}

		select {
			font: 14px Arial, Helvetica, sans-serif;
			background:#E0F8F7;
			width:220px;
		}

	.testingParameters {
		float:left;
		width:59%;
		height:40%;
	}

	.history {
		width:99%;
		height:28.5%;
		
	}

	.historyContainer {
		width:100%;
		height:62%;
		overflow:scroll;
	}
		/* Table
   --------------------------------------------------------------------------------------------------*/
	.history table.hovertable {
		width:100%;
		table-layout:fixed;
		font-family: verdana,arial,sans-serif;
		font-size:11px;
		color:#333333;
		border-width: 1px;
		border-color: #0076a3;
		border-collapse:collapse;
	}
	.history table.hovertable th {
		height:15px;
		color:#FFFFFF;
		background-color:#0095cd;
		border-width: 1px;
		border-style: solid;
		border-color: #538312;		
	}
	.history table.hovertable tr {
		height:15px;
		background-color:#87CEFF;
	}
	.history table.hovertable tr:hover {
		background-color:#f895c2;
	}
	.history table.hovertable td {
		white-space:nowrap;
		overflow:auto;
		border-width: 1px;
		border-style: solid;
		border-color: #538312;
	}

	.onmouseover {
		background-color:#4876FF;
	}

	</style>
</head>
<body>
	<div class="container">
		<div class="left">
			<div id="testingParameters" class="testingParameters">        
				<table>
					<tr>
						<td><lable for="testingURL">URL:</lable></td>
						<td>
							<select id="testingURLs" onchange="document.getElementById('testingURL').value=this.value;">
								<option value="">--请选择--</option>
								<option value="http://221.180.145.32:8080/qqtmain/terminalgate">现网</option>
								<option value="http://211.137.43.138:8802/qqtmain/terminalgate">测试网</option>
							</select>
							<input class="editableSelectInput" id="testingURL" type="text"/>
						</td>
					</tr>
					<tr>
						<td><lable for="child_mobile"> Mobile:</lable></td>
						<td>
							<select id="child_mobiles" onchange="document.getElementById('child_mobile').value=this.value">
								<option value="">--请选择--</option>
								<option value="15140090421">15140090421</option>
								<option value="15940065240">15940065240</option>
							</select>
							<input class="editableSelectInput" id="child_mobile" type="text" />
						</td>
					</tr>
					<tr>
						<td>座標:</td>
						<td>
							<input type="text" name="lng" id="lng" style="width:100px;"  value="116.4789925" />
							<input type="text" name="lat" id="lat" style="width: 100px; float:right;"  value="39.9926268" />
						</td>
					</tr>
					<tr>
						<td>地址:</td><td><textarea name="address" id="address" style="width:97%;height:100px;">中国北京市朝阳区望京阜安东路</textarea></td>
					</tr>
				</table>						
			</div>

			<fieldset class="DWJH">
				<legend>定位计划</legend>
				<textarea id="DWJH"></textarea>
				<button id="change" onclick="createContent4DWJH()">定位计划</div>
				<button id="clear" onclick="clearOverlays()">Clear</button>
				<button id="copyDWJHBtn">Copy</button>
				<button id="postDWJH" class="button">Post</button>
			</fieldset>

			<fieldset class="SS">
				<legend>实时定位</legend>
				<textarea id="SS"></textarea>
				<button id="SSBtn" class="button">实时定位</button>
				<button id="clear" onclick="clearOverlays()">Clear</button>
				<button id="copySS" class="button">Copy</button>
				<button id="postSS" class="button">Post</button>
			</fieldset>

			<fieldset class="QY">
				<legend>区域报警</legend>
				<textarea id="QY"></textarea>
				<button id="QYBtn" class="button">区域报警</button>
				<button id="clear" onclick="clearOverlays()">Clear</button>
				<button id="copyQY" class="button">Copy</button>
				<button id="postQY" class="button">Post</button>
			</fieldset>
		</div>

		<div class="right">
			<div id="map"></div>
			<fieldset class="history">
				<legend>History</legend>
				<table class="hovertable" style="width:98.39%">
					<thead>
						<tr>
							<th>Action Name</th>
							<th>Request</th>
							<th>Response</th>
							<th>Request Time</th>
							<th>Elapsed Time</th>
						</tr>
					</thead>
				</table>
				<div class="historyContainer">
					<table id="history" class="hovertable">
						<tbody>
						</tbody>
					</table>
				</div>
				<lable for="logFileName">Log File:</lable>
				<input class="logFileName" id="logFileName" type="text"/>
				<button id="saveLog" class="button" onclick="saveHistory()">Save</button>
				<button id="openLog" class="button" onclick="readLog()">Open</button>
				<button id="clearLog" class="button" onclick="clearLog()">Clear</button>
			</fieldset>
		</div>

	</div>
	

<script language="javascript" type="text/javascript">
    var map;
    var marker;
    var infowindow;
    var geocoder;
    var markersArray = [];

    function initialize() {
        //设置中心点
        var latlng = new google.maps.LatLng(39.9926268 , 116.4789925);
        var myOptions = {
            zoom: 13,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map"), myOptions);
        geocoder = new google.maps.Geocoder();
        //监听点击地图事件
        google.maps.event.addListener(map, 'click', function (event) {
            placeMarker(event.latLng);
        });
    }

    function placeMarker(location) {
        //clearOverlays(infowindow);//清除地图中的标记
        marker = new google.maps.Marker({
            position: location,
            map: map
        });
        markersArray.push(marker);
        //根据经纬度获取地址
        if (geocoder) {
            geocoder.geocode({ 'location': location }, function (results, status) {
                if (status === google.maps.GeocoderStatus.OK) {
                    if (results[0]) {
                        //attachSecretMessage(marker, results[0].geometry.location, results[0].formatted_address);
						attachSecretMessage(marker, location, results[0].formatted_address);
                    }
                } else {
                    alert("Geocoder failed due to: " + status);
                }
            });
        }
    }

    //在地图上显示经纬度地址
    function attachSecretMessage(marker, piont, address) {
        var message = "<b>座標:</b>" + piont.lat() + " , " + piont.lng() + "<br />" + "<b>地址:</b>" + address;
        var infowindow = new google.maps.InfoWindow(
            {
                content: message,
                size: new google.maps.Size(50, 50)
            });
        infowindow.open(map, marker);
        if (typeof (mapClick) === "function") mapClick(piont.lng(), piont.lat(), address);
    }

    //删除所有标记阵列中消除对它们的引用
    function clearOverlays(infowindow) {
        if (markersArray && markersArray.length > 0) {
            for (var i = 0; i < markersArray.length; i++) {
                markersArray[i].setMap(null);
            }
            markersArray.length = 0;
        }
        if (infowindow) {
            infowindow.close();
        }
    }

    function setiInit() {
        // 页面加载显示默认lng lat address---begin
        var lattxt = document.getElementById("lat").value;
        var lngtxt = document.getElementById("lng").value;
        var addresstxt = document.getElementById("address").value;
        if (lattxt != '' && lngtxt != '' && addresstxt != '') {
            var latlng = new google.maps.LatLng(lattxt, lngtxt);
            marker = new google.maps.Marker({
                position: latlng,
                map: map
            });
            markersArray.push(marker);
            attachSecretMessage(marker, latlng, addresstxt);
        }
        // ---end
    }
    function mapClick(lng, lat, address) {
        document.getElementById("lng").value = lng;
        document.getElementById("lat").value = lat;
        document.getElementById("address").value = address;
    }
    initialize();
    window.onload = function () {
        setiInit();
    }

/***********************************
 * 基础函数
 ************************************/
var Timer = {
	_data: {},
	start: function(key) {
		Timer._data[key] = new Object();
		Timer._data[key].startTime = new Date();
		Timer._data[key].endTime = null;
		Timer._data[key].elapsedTime = null;
	},
	stop: function(key) {
		var time = Timer._data[key].startTime;
		if (time) {
			Timer._data[key].endTime = new Date();
			Timer._data[key].elapsedTime = Timer._data[key].endTime - time;
		}
	},
	getStartTime: function(key) {
		return Timer._data[key].startTime;
	},
	getEndTime: function(key) {
		return Timer._data[key].endTime;
	},
	getElapsedTime: function(key) {
		return Timer._data[key].elapsedTime;
	}
};

/**
 * <param name="x">待显示的日期时间，例如new Date()</param>
 * <param name="y">需要显示的格式，例如yyyy-MM-dd hh:mm:ss:SSSS</param>
 */
function date2str(x,y) {
	var z = {M:x.getMonth()+1,d:x.getDate(),H:x.getHours(),m:x.getMinutes(),s:x.getSeconds()};
	y = y.replace(/(M+|d+|H+|m+|s+)/g,function(v) {return ((v.length>1?"0":"")+eval('z.'+v.slice(-1))).slice(-2)});
	y = y.replace(/(S+)/g,function(v) {return x.getMilliseconds().toString().slice(-v.length)});
	return y.replace(/(y+)/g,function(v) {return x.getFullYear().toString().slice(-v.length)});
}

/**
 * Copy some content to clipboard
 */
function copyToClipboard(content) {
	if (window.clipboardData && clipboardData.setData) {
		clipboardData.setData('text', content);
	}
}

/**
 * 时间处理
 * 以yyyyMMdd的格式返回当前时间
 */
 Date.prototype.yyyyMMddHHmmSS = function() {
   var yyyy = this.getFullYear().toString();
   var MM = (this.getMonth()+1).toString();
   var dd  = this.getDate().toString();
   var HH = this.getHours().toString();
   var mm = this.getMinutes().toString();
   var SS = this.getSeconds().toString();

   return yyyy + (MM[1]?MM:"0"+MM[0]) + (dd[1]?dd:"0"+dd[0])+(HH[1]?HH:"0"+HH[0]) + (mm[1]?mm:"0"+mm[0])+ (SS[1]?SS:"0"+SS[0]); // padding
 };

 var transNum = Math.round(10000*Math.random());

 /**
  * Create ding wei ji hua content
  **/
 var createContent4DWJH = function (){
	var doc = document;
	var strs = null;
	var pointers = new Array();
	var interval = 10;
	var date = new Date();

	/*
	for (var i = markersArray.length; i--; ) {
		//date.setMinutes(date.getMinutes() + interval);
		date.setSeconds(date.getSeconds() + interval);
		pointers[i] = "00E"+markersArray[i].position.lng().toFixed(6)+"N"+markersArray[i].position.lat().toFixed(6)+"T"+date.yyyyMMddHHmmSS();
	}
	*/

	for (var i = 0,length = markersArray.length; i < length; i++)
	{
		date.setSeconds(date.getSeconds() + interval);
		pointers[i] = "00E"+markersArray[i].position.lng().toFixed(6)+"N"+markersArray[i].position.lat().toFixed(6)+"T"+date.yyyyMMddHHmmSS();
	}

	var newStr = pointers.join("!")+"!";

	var outPutStr = "["+date.yyyyMMddHHmmSS()+transNum+++",T16,"+newStr.length+","+newStr+"]";
	doc.getElementById("DWJH").innerHTML = outPutStr;
};

var doc = document;

// Copy ding wei ji hua message
var copyBtn4DWJH = doc.getElementById("copyDWJHBtn");

copyBtn4DWJH.onclick = function() {
	copyToClipboard(doc.getElementById("DWJH").innerHTML);
}

// POST button
var postDWJH = doc.getElementById("postDWJH");

postDWJH.onclick = function() {
	var type = "定位计划";
	var content = document.getElementById("DWJH").innerHTML;
	sendContent(type,content);	
};




 /**
  * Create shi shi ding wei content
  **/
 var createContent4SS = function (){
	var doc = document;
	var trans = doc.getElementById("SS").innerHTML;
	var trnasLength = 18;

	if (trans.length != trnasLength)
	{
		alert("Please input trans!\r\nThe trans created form A031 interface!");
		return;
	}

	var length = markersArray.length;
	if (length === 0)
	{
		alert("Please make a mark on the map!");
		return;
	}

	var latLng = markersArray[length-1];

	var time = trans.substring(0,trans.length-4);
	var content = ",00E"+latLng.position.lng().toFixed(6)+"N"+latLng.position.lat().toFixed(6)+"T"+time+"@SS";
	var outPutStr = "["+trans+",T15,"+content.length+content+"]";
	doc.getElementById("SS").innerHTML = outPutStr;
};

var SSBtn = doc.getElementById("SSBtn");

SSBtn.onclick = createContent4SS;

// Copy shi shi ding wei message
var copyBtn4SS = doc.getElementById("copySS");
copyBtn4SS.onclick = function() {
	copyToClipboard(document.getElementById("SS").innerHTML);
}

// POST button
var postSS = doc.getElementById("postSS");

postSS.onclick = function() {
	var type = "实时定位";
	var content = document.getElementById("SS").innerHTML;
	sendContent(type,content);	
};


/**
  * Create qu yu bao jing content
  **/
 var createContent4QY = function (){
	var doc = document;
	var length = markersArray.length;

	if (length === 0)
	{
		alert("Please make a mark on the map!");
		return;
	}

	var latLng = markersArray[length-1];
	var date = new Date();
	var time = date.yyyyMMddHHmmSS();
	var content = ",00E"+latLng.position.lng().toFixed(6)+"N"+latLng.position.lat().toFixed(6)+"T"+time+"@QY";
	var outPutStr = "["+time+transNum+++",T15,"+content.length+content+"]";
	doc.getElementById("QY").innerHTML = outPutStr;
};

var QYBtn = doc.getElementById("QYBtn");

QYBtn.onclick = createContent4QY;

// Copy qu yu bao jing message
var copyBtn4QY = doc.getElementById("copyQY");
copyBtn4QY.onclick = function() {
	copyToClipboard(document.getElementById("QY").innerHTML);
}



/**
 * 延迟加载方法
 * 实现不用每次调用createXMLHttpRequest函数的时候都判断一下浏览器是IE7+还是IE6
 */
function createXMLHttpRequest() {
	if (window.XMLHttpRequest) {
		createXMLHttpRequest = function() {
			// code for IE7+, Firefox, Chrome, Opera, Safar
			return new XMLHttpRequest();
		};
	} else {
		createXMLHttpRequest = function() {
			// code for IE6, IE5
			return new ActiveXObject("Microsoft.XMLHTTP");
		};
	}
	return createXMLHttpRequest();
}

var RequestOption = {
	createNew: function(method,url,contentType) {
		var requestOption = {}
		requestOption.method = method;
		requestOption.url = url;
		requestOption.contentType = contentType;

		return requestOption;
	}
};

var xmlhttp = null;

xmlhttp = createXMLHttpRequest();

// POST button
var postQY = doc.getElementById("postQY");

postQY.onclick = function() {
	var type = "区域报警";
	var content = document.getElementById("QY").innerHTML;
	sendContent(type,content);	
};

function sendContent(type,content) {
		var doc = document;
		// Child mobile
		var child_mobile = doc.getElementById("child_mobile").value;
		// testing URL
		var TESTING_URL = doc.getElementById("testingURL").value;
		var METHOD = "POST";
		var CONTENT_TYPE = "text/xml";
		var requestOption = RequestOption.createNew(METHOD,TESTING_URL,CONTENT_TYPE);


		if (requestOption.url === "") {
			alert("请输入测试网址！");
			return false;
		}

		if(child_mobile === "") {
			alert("请输入子卡卡号！");
			return false;
		}

		Timer.start('content');
		xmlhttp.open(requestOption.method,requestOption.url,true);
		xmlhttp.setRequestHeader("Content-type",requestOption.contentType);
		xmlhttp.setRequestHeader("X-UP-CALLING-LINE-ID",child_mobile);
		xmlhttp.send(content);

		xmlhttp.onreadystatechange=function() {
			if (xmlhttp.readyState === 4) {
				Timer.stop('content');
				createHistory(type,content,xmlhttp.status,date2str(Timer.getStartTime('content'),"HH:mm:ss:SSSS yyyy-MM-dd"),Timer.getElapsedTime('content')+" ms");
			}
		}
}

function createHistory(actionName,requestText,responseText,requestTime,elapsedTime) {
	// Create request and response history
	var historyHTML = document.getElementById("history");
		
	var tbody = historyHTML.tBodies[0];

	var row = tbody.insertRow(0);	

	row.insertCell(0);
	row.cells[0].innerText = actionName; 
	
	row.insertCell(1);
	row.cells[1].innerText = requestText; 
	
	row.insertCell(2);
	row.cells[2].innerText = responseText;

	row.insertCell(3);
	row.cells[3].innerText = requestTime;

	row.insertCell(4);
	row.cells[4].innerText = elapsedTime;

	
	var rowBackgroundColor = row.style.backgroundColor;

	// 设置相邻行颜色不一样
	if( tbody.rows.length & 1 ) {
		rowBackgroundColor = "#FFFFFF";
	}

	var transPatt = new RegExp('error');
	// 如果返回的结果包含error字符串，则将该行设置成黄色
	if (transPatt.test(responseText)) {
		rowBackgroundColor = "#FFFF00";
	}
	row.style.backgroundColor = rowBackgroundColor;


	// 设置鼠标入和画出后的背景颜色
	//var rowBackgroundColor = row.style.backgroundColor;

	row.onclick = function() {
		//showSelectedLog(this);
	}
	
	row.onmouseover = function() {
		row.style.backgroundColor = "#f895c2";
	}
	
	row.onmouseout = function() {
		row.style.backgroundColor = rowBackgroundColor;
	}
} 


</script>

</body>
</html> 